<template>
    <div id = "option-zone">
      <div> △ </div>
      <div>{{optionVal}}</div>
      <div> ▽ </div>
    </div>
</template>

<script>
  export default {
    ready () {
      this.incVal = function () {
        let tmp = this.optionVal.replace(':', '.')
        tmp = parseFloat(tmp)
        let max = this.optionObj.zone[1].replace(':', '.')
        max = parseFloat(max)

        tmp += 0.15

        let i = parseInt(tmp)
        if (tmp > 0) {
          if ((tmp - i) > 0.45) {
            tmp -= (tmp - i)
            tmp += 1
          }
        } else {
          if ((tmp - i) < -0.45) {
            tmp -= (tmp - i)
            tmp -= 0.45
          }
        }

        if (tmp > max) {
          tmp = max
        }
        tmp = tmp.toFixed(2)
        tmp = tmp.replace('.', ':')
        if (tmp.indexOf('-') === -1) {
          tmp = '+' + tmp
        }
        this.optionVal = tmp
      }

      this.decVal = function () {
        let tmp = this.optionVal.replace(':', '.')
        tmp = parseFloat(tmp)
        let min = this.optionObj.zone[0].replace(':', '.')
        min = parseFloat(min)

        tmp -= 0.15

        let i = parseInt(tmp)
        if (tmp > 0) {
          if ((tmp - i) > 0.45) {
            tmp -= (tmp - i)
            tmp += 0.45
          }
        } else {
          if ((tmp - i) < -0.45) {
            console.log('test ****' + (tmp - i))
            tmp -= (tmp - i)
            tmp -= 1
          }
        }

        if (tmp < min) {
          tmp = min
        }
        tmp = tmp.toFixed(2)
        tmp = tmp.replace('.', ':')
        if (tmp.indexOf('-') === -1) {
          tmp = '+' + tmp
        }
        this.optionVal = tmp
      }
    },
    props: {
      optionObj: {
        type: Object,
        require: true
      },
      optionVal: {
        type: String,
        twoWay: true,
        require: true
      }
    }
  }
</script>

<style lang = "less">
  #option-zone {
    border: 3px solid grey;
  }
</style>
